<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Flat UI - Free User Interface Kit</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Loading Bootstrap -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- Loading Flat UI -->
    <link href="css/flat-ui.css" rel="stylesheet">
    <link href="css/demo.css" rel="stylesheet">

    <link rel="shortcut icon" href="images/favicon.ico">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
    <![endif]-->
	<style>
		body {
			background: #252528;

		}
		.info {
			
			margin: 13px 0 0 10px;
		}
		.avatar {
			text-align:center;
		}
		.avatar img{
			width:120px;
		}
		.info a span {
			display: inline-block;
			width: 33px;
			height: 33px;
		}
		.socialicons {
			background: url("http://bestapp.us/assets/socialicons.png") no-repeat;
			width: 265px;
			height: 36px;
		}
		.socialicons:hover {
			background: url("http://bestapp.us/assets/socialicons_h.png") no-repeat;
		}
		.info span.ico2, .info span.ico2h {
			background-position: -37px 0px;
		}
		.info span.ico3, .info span.ico3h {
			background-position: -75px 0px;
		}
		h3.name {
			font-size:28px;
		}
		.info p {
			font-style: italic;
		} 
		.box-block{
			padding:20px 10px;
			position:relative;
		}
		.box-block:hover{
			
			background:#0090cc;
			color:#fff;
			border-radius:4px;
			cursor:pointer;
		}
		.more {
			width:0px;
			position:absolute;display:none;top:0;height:100%;z-index:10000;background:#0090cc;border-radius: 0 4px 4px 0;
		}
		.tag-group{
			margin:5px 0;
		}
		.tag-group .tag{
			margin:3px 3px 3px 0;
		}
	</style>

  </head>
  <body>
    <div class="container">

      <h1>排行榜</h1>
      <h3>关注我们</h3>
	  <div class="row">
		<div class="col-md-3 box-block" style="position:relative;">
			<div class="avatar" style="">
				<img src="http://bestapp.us/assets/xiao_o1.jpg" alt="" class="img-circle">
			</div>
			<div class="info">
				<h3 class="name">雷总</h3>
				<p class="intro">小米网创始人</p>
				<a href="https://plus.google.com/u/0/110907786463978318980" class="gplus">
					<span class="socialicons ico3"></span>
					
				</a>
				<a href="https://twitter.com/anson_ho" class="twitter">
					<span class="socialicons ico2"></span>
				
				</a>
				<a href="http://weibo.com/gzanson" class="flickr">
					<span class="socialicons ico4"></span>
					
				</a>
				<a href="mailto:gz.anson@gmail.com" class="dribble">
					<span class="socialicons ico6"></span>
					
				</a>
				
				<div class="tag-group">
					<span class="tag"><span>PHP</span><a class="tagsinput-remove-link"></a></span>
					<span class="tag"><span>Nodejs</span><a class="tagsinput-remove-link"></a></span>
					<span class="tag"><span>jquery</span><a class="tagsinput-remove-link"></a></span>
					<span class="tag"><span>Unique</span><a class="tagsinput-remove-link"></a></span>
					
				</div>
			</div>
			<div class="more" style="width:0px;position:absolute;display:none;left:100%;top:0;height:100%;z-index:10000;background:#0090cc;border-radius: 0 4px 4px 0 ;">
				<h3 class="name">雷总</h3>
				<p class="intro">角度来看附件楼上的了房间圣诞快乐疯了似的解放路的路飞就快了</p>
			</div>
		</div>
		
			
		
		<div class="col-md-3 box-block" style="position:relative;">
			<div class="avatar" style="">
				<img src="http://bestapp.us/assets/anson.jpg" alt="" class="img-circle">
			</div>
			<div class="info">
				<h3 class="name">Anson</h3>
				<p class="area">Chief Executive Officer</p>
				<a href="https://plus.google.com/u/0/110907786463978318980" class="gplus">
					<span class="socialicons ico3"></span>
					
				</a>
				<a href="https://twitter.com/anson_ho" class="twitter">
					<span class="socialicons ico2"></span>
				
				</a>
				<a href="http://weibo.com/gzanson" class="flickr">
					<span class="socialicons ico4"></span>
					
				</a>
				<a href="mailto:gz.anson@gmail.com" class="dribble">
					<span class="socialicons ico6"></span>
					
				</a>
			</div>
			<div class="more" style="left:100%;">
				<h3 class="name">雷总</h3>
				<p class="intro">角度来看附件楼上的了房间圣诞快乐疯了似的解放路的路飞就快了</p>
			</div>
		</div>
		<div class="col-md-3 box-block">
			<div class="avatar" style="">
				<img src="http://bestapp.us/assets/anson.jpg" alt="" class="img-circle">
			</div>
			<div class="info">
				<p class="name">Anson</p>
				<p class="area">Chief Executive Officer</p>
				<a href="https://plus.google.com/u/0/110907786463978318980" class="gplus">
					<span class="socialicons ico3"></span>
					
				</a>
				<a href="https://twitter.com/anson_ho" class="twitter">
					<span class="socialicons ico2"></span>
				
				</a>
				<a href="http://weibo.com/gzanson" class="flickr">
					<span class="socialicons ico4"></span>
					
				</a>
				<a href="mailto:gz.anson@gmail.com" class="dribble">
					<span class="socialicons ico6"></span>
					
				</a>
			</div>
			<div class="more" style="left:100%;">
				<h3 class="name">雷总</h3>
				<p class="intro">角度来看附件楼上的了房间圣诞快乐疯了似的解放路的路飞就快了</p>
			</div>
		</div>
		<div class="col-md-3 box-block">
			<div class="avatar" style="">
				<img src="http://bestapp.us/assets/anson.jpg" alt="" class="img-circle">
			</div>
			<div class="info">
				<p class="name">Anson</p>
				<p class="area">Chief Executive Officer</p>
				<a href="https://plus.google.com/u/0/110907786463978318980" class="gplus">
					<span class="socialicons ico3"></span>
					
				</a>
				<a href="https://twitter.com/anson_ho" class="twitter">
					<span class="socialicons ico2"></span>
				
				</a>
				<a href="http://weibo.com/gzanson" class="flickr">
					<span class="socialicons ico4"></span>
					
				</a>
				<a href="mailto:gz.anson@gmail.com" class="dribble">
					<span class="socialicons ico6"></span>
					
				</a>
			</div>
			<div class="more" style="left:100%;">
				<h3 class="name">雷总</h3>
				<p class="intro">角度来看附件楼上的了房间圣诞快乐疯了似的解放路的路飞就快了</p>
			</div>
		</div>
	  </div>
	  <div class="row">
		<div class="col-md-3 box-block" style="position:relative;">
			<div class="avatar" style="">
				<img src="http://bestapp.us/assets/xiao_o1.jpg" alt="" class="img-circle">
			</div>
			<div class="info">
				<h3 class="name">雷总</h3>
				<p class="intro">小米网创始人</p>
				<a href="https://plus.google.com/u/0/110907786463978318980" class="gplus">
					<span class="socialicons ico3"></span>
					
				</a>
				<a href="https://twitter.com/anson_ho" class="twitter">
					<span class="socialicons ico2"></span>
				
				</a>
				<a href="http://weibo.com/gzanson" class="flickr">
					<span class="socialicons ico4"></span>
					
				</a>
				<a href="mailto:gz.anson@gmail.com" class="dribble">
					<span class="socialicons ico6"></span>
					
				</a>
			</div>
			<div class="more" style="width:0px;position:absolute;display:none;left:100%;top:0;height:100%;z-index:10000;background:#0090cc;border-radius: 0 4px 4px 0 ;">
				<h3 class="name">雷总</h3>
				<p class="intro">角度来看附件楼上的了房间圣诞快乐疯了似的解放路的路飞就快了</p>
			</div>
		</div>
		
			
		
		<div class="col-md-3 box-block" style="position:relative;">
			<div class="avatar" style="">
				<img src="http://bestapp.us/assets/anson.jpg" alt="" class="img-circle">
			</div>
			<div class="info">
				<h3 class="name">Anson</h3>
				<p class="area">Chief Executive Officer</p>
				<a href="https://plus.google.com/u/0/110907786463978318980" class="gplus">
					<span class="socialicons ico3"></span>
					
				</a>
				<a href="https://twitter.com/anson_ho" class="twitter">
					<span class="socialicons ico2"></span>
				
				</a>
				<a href="http://weibo.com/gzanson" class="flickr">
					<span class="socialicons ico4"></span>
					
				</a>
				<a href="mailto:gz.anson@gmail.com" class="dribble">
					<span class="socialicons ico6"></span>
					
				</a>
			</div>
			<div class="more" style="left:100%;">
				<h3 class="name">雷总</h3>
				<p class="intro">角度来看附件楼上的了房间圣诞快乐疯了似的解放路的路飞就快了</p>
			</div>
		</div>
		<div class="col-md-3 box-block">
			<div class="avatar" style="">
				<img src="http://bestapp.us/assets/anson.jpg" alt="" class="img-circle">
			</div>
			<div class="info">
				<p class="name">Anson</p>
				<p class="area">Chief Executive Officer</p>
				<a href="https://plus.google.com/u/0/110907786463978318980" class="gplus">
					<span class="socialicons ico3"></span>
					
				</a>
				<a href="https://twitter.com/anson_ho" class="twitter">
					<span class="socialicons ico2"></span>
				
				</a>
				<a href="http://weibo.com/gzanson" class="flickr">
					<span class="socialicons ico4"></span>
					
				</a>
				<a href="mailto:gz.anson@gmail.com" class="dribble">
					<span class="socialicons ico6"></span>
					
				</a>
			</div>
			<div class="more" style="left:100%;">
				<h3 class="name">雷总</h3>
				<p class="intro">角度来看附件楼上的了房间圣诞快乐疯了似的解放路的路飞就快了</p>
			</div>
		</div>
		<div class="col-md-3 box-block">
			<div class="avatar" style="">
				<img src="http://bestapp.us/assets/anson.jpg" alt="" class="img-circle">
			</div>
			<div class="info">
				<p class="name">Anson</p>
				<p class="area">Chief Executive Officer</p>
				<a href="https://plus.google.com/u/0/110907786463978318980" class="gplus">
					<span class="socialicons ico3"></span>
					
				</a>
				<a href="https://twitter.com/anson_ho" class="twitter">
					<span class="socialicons ico2"></span>
				
				</a>
				<a href="http://weibo.com/gzanson" class="flickr">
					<span class="socialicons ico4"></span>
					
				</a>
				<a href="mailto:gz.anson@gmail.com" class="dribble">
					<span class="socialicons ico6"></span>
					
				</a>
			</div>
			<div class="more" style="left:100%;">
				<h3 class="name">雷总</h3>
				<p class="intro">角度来看附件楼上的了房间圣诞快乐疯了似的解放路的路飞就快了</p>
			</div>
		</div>
	  </div>
	  <div class="row">
		<div class="col-md-3 box-block" style="position:relative;">
			<div class="avatar" style="">
				<img src="http://bestapp.us/assets/xiao_o1.jpg" alt="" class="img-circle">
			</div>
			<div class="info">
				<h3 class="name">雷总</h3>
				<p class="intro">小米网创始人</p>
				<a href="https://plus.google.com/u/0/110907786463978318980" class="gplus">
					<span class="socialicons ico3"></span>
					
				</a>
				<a href="https://twitter.com/anson_ho" class="twitter">
					<span class="socialicons ico2"></span>
				
				</a>
				<a href="http://weibo.com/gzanson" class="flickr">
					<span class="socialicons ico4"></span>
					
				</a>
				<a href="mailto:gz.anson@gmail.com" class="dribble">
					<span class="socialicons ico6"></span>
					
				</a>
			</div>
			<div class="more" style="width:0px;position:absolute;display:none;left:100%;top:0;height:100%;z-index:10000;background:#0090cc;border-radius: 0 4px 4px 0 ;">
				<h3 class="name">雷总</h3>
				<p class="intro">角度来看附件楼上的了房间圣诞快乐疯了似的解放路的路飞就快了</p>
			</div>
		</div>
		
			
		
		<div class="col-md-3 box-block" style="position:relative;">
			<div class="avatar" style="">
				<img src="http://bestapp.us/assets/anson.jpg" alt="" class="img-circle">
			</div>
			<div class="info">
				<h3 class="name">Anson</h3>
				<p class="area">Chief Executive Officer</p>
				<a href="https://plus.google.com/u/0/110907786463978318980" class="gplus">
					<span class="socialicons ico3"></span>
					
				</a>
				<a href="https://twitter.com/anson_ho" class="twitter">
					<span class="socialicons ico2"></span>
				
				</a>
				<a href="http://weibo.com/gzanson" class="flickr">
					<span class="socialicons ico4"></span>
					
				</a>
				<a href="mailto:gz.anson@gmail.com" class="dribble">
					<span class="socialicons ico6"></span>
					
				</a>
			</div>
			<div class="more" style="left:100%;">
				<h3 class="name">雷总</h3>
				<p class="intro">角度来看附件楼上的了房间圣诞快乐疯了似的解放路的路飞就快了</p>
			</div>
		</div>
		<div class="col-md-3 box-block">
			<div class="avatar" style="">
				<img src="http://bestapp.us/assets/anson.jpg" alt="" class="img-circle">
			</div>
			<div class="info">
				<p class="name">Anson</p>
				<p class="area">Chief Executive Officer</p>
				<a href="https://plus.google.com/u/0/110907786463978318980" class="gplus">
					<span class="socialicons ico3"></span>
					
				</a>
				<a href="https://twitter.com/anson_ho" class="twitter">
					<span class="socialicons ico2"></span>
				
				</a>
				<a href="http://weibo.com/gzanson" class="flickr">
					<span class="socialicons ico4"></span>
					
				</a>
				<a href="mailto:gz.anson@gmail.com" class="dribble">
					<span class="socialicons ico6"></span>
					
				</a>
			</div>
			<div class="more" style="left:100%;">
				<h3 class="name">雷总</h3>
				<p class="intro">角度来看附件楼上的了房间圣诞快乐疯了似的解放路的路飞就快了</p>
			</div>
		</div>
		<div class="col-md-3 box-block">
			<div class="avatar" style="">
				<img src="http://bestapp.us/assets/anson.jpg" alt="" class="img-circle">
			</div>
			<div class="info">
				<p class="name">Anson</p>
				<p class="area">Chief Executive Officer</p>
				<a href="https://plus.google.com/u/0/110907786463978318980" class="gplus">
					<span class="socialicons ico3"></span>
					
				</a>
				<a href="https://twitter.com/anson_ho" class="twitter">
					<span class="socialicons ico2"></span>
				
				</a>
				<a href="http://weibo.com/gzanson" class="flickr">
					<span class="socialicons ico4"></span>
					
				</a>
				<a href="mailto:gz.anson@gmail.com" class="dribble">
					<span class="socialicons ico6"></span>
					
				</a>
			</div>
			<div class="more" style="left:100%;">
				<h3 class="name">雷总</h3>
				<p class="intro">角度来看附件楼上的了房间圣诞快乐疯了似的解放路的路飞就快了</p>
			</div>
		</div>
	  </div>
	  <div class="row">
		<div class="col-md-3 box-block" style="position:relative;">
			<div class="avatar" style="">
				<img src="http://bestapp.us/assets/xiao_o1.jpg" alt="" class="img-circle">
			</div>
			<div class="info">
				<h3 class="name">雷总</h3>
				<p class="intro">小米网创始人</p>
				<a href="https://plus.google.com/u/0/110907786463978318980" class="gplus">
					<span class="socialicons ico3"></span>
					
				</a>
				<a href="https://twitter.com/anson_ho" class="twitter">
					<span class="socialicons ico2"></span>
				
				</a>
				<a href="http://weibo.com/gzanson" class="flickr">
					<span class="socialicons ico4"></span>
					
				</a>
				<a href="mailto:gz.anson@gmail.com" class="dribble">
					<span class="socialicons ico6"></span>
					
				</a>
			</div>
			<div class="more" style="width:0px;position:absolute;display:none;left:100%;top:0;height:100%;z-index:10000;background:#0090cc;border-radius: 0 4px 4px 0 ;">
				<h3 class="name">雷总</h3>
				<p class="intro">角度来看附件楼上的了房间圣诞快乐疯了似的解放路的路飞就快了</p>
			</div>
		</div>
		
			
		
		<div class="col-md-3 box-block" style="position:relative;">
			<div class="avatar" style="">
				<img src="http://bestapp.us/assets/anson.jpg" alt="" class="img-circle">
			</div>
			<div class="info">
				<h3 class="name">Anson</h3>
				<p class="area">Chief Executive Officer</p>
				<a href="https://plus.google.com/u/0/110907786463978318980" class="gplus">
					<span class="socialicons ico3"></span>
					
				</a>
				<a href="https://twitter.com/anson_ho" class="twitter">
					<span class="socialicons ico2"></span>
				
				</a>
				<a href="http://weibo.com/gzanson" class="flickr">
					<span class="socialicons ico4"></span>
					
				</a>
				<a href="mailto:gz.anson@gmail.com" class="dribble">
					<span class="socialicons ico6"></span>
					
				</a>
			</div>
			<div class="more" style="left:100%;">
				<h3 class="name">雷总</h3>
				<p class="intro">角度来看附件楼上的了房间圣诞快乐疯了似的解放路的路飞就快了</p>
			</div>
		</div>
		<div class="col-md-3 box-block">
			<div class="avatar" style="">
				<img src="http://bestapp.us/assets/anson.jpg" alt="" class="img-circle">
			</div>
			<div class="info">
				<p class="name">Anson</p>
				<p class="area">Chief Executive Officer</p>
				<a href="https://plus.google.com/u/0/110907786463978318980" class="gplus">
					<span class="socialicons ico3"></span>
					
				</a>
				<a href="https://twitter.com/anson_ho" class="twitter">
					<span class="socialicons ico2"></span>
				
				</a>
				<a href="http://weibo.com/gzanson" class="flickr">
					<span class="socialicons ico4"></span>
					
				</a>
				<a href="mailto:gz.anson@gmail.com" class="dribble">
					<span class="socialicons ico6"></span>
					
				</a>
			</div>
			<div class="more" style="left:100%;">
				<h3 class="name">雷总</h3>
				<p class="intro">角度来看附件楼上的了房间圣诞快乐疯了似的解放路的路飞就快了</p>
			</div>
		</div>
		<div class="col-md-3 box-block">
			<div class="avatar" style="">
				<img src="http://bestapp.us/assets/anson.jpg" alt="" class="img-circle">
			</div>
			<div class="info">
				<p class="name">Anson</p>
				<p class="area">Chief Executive Officer</p>
				<a href="https://plus.google.com/u/0/110907786463978318980" class="gplus">
					<span class="socialicons ico3"></span>
					
				</a>
				<a href="https://twitter.com/anson_ho" class="twitter">
					<span class="socialicons ico2"></span>
				
				</a>
				<a href="http://weibo.com/gzanson" class="flickr">
					<span class="socialicons ico4"></span>
					
				</a>
				<a href="mailto:gz.anson@gmail.com" class="dribble">
					<span class="socialicons ico6"></span>
					
				</a>
			</div>
			<div class="more" style="left:100%;">
				<h3 class="name">雷总</h3>
				<p class="intro">角度来看附件楼上的了房间圣诞快乐疯了似的解放路的路飞就快了</p>
			</div>
		</div>
	  </div>

    </div> <!-- /container -->

    <footer>
      <div class="container">
        <div class="row">
          <div class="col-md-7">
            <h3 class="footer-title">Subscribe</h3>
            <p>Do you like this freebie? Want to get more stuff like this?<br/>
              Subscribe to designmodo news and updates to stay tuned on great designs.<br/>
              Go to: <a href="http://designmodo.com/flat-free" target="_blank">designmodo.com/flat-free</a>
            </p>

            <p class="pvl">
              <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://designmodo.com/flat-free/">
              
            </p>

            <a class="footer-brand" href="http://designmodo.com" target="_blank">
              <img src="images/footer/logo.png" alt="Designmodo.com" />
            </a>
          </div> <!-- /col-md-7 -->

          <div class="col-md-5">
            <div class="footer-banner">
              <h3 class="footer-title">Get Flat UI Pro</h3>
              <ul>
                <li>Tons of Basic and Custom UI Elements</li>
                <li>A Lot of Useful Samples</li>
                <li>More Vector Icons and Glyphs</li>
                <li>Pro Color Swatches</li>
                <li>Bootstrap Based HTML/CSS/JS Layout</li>
              </ul>
              Go to: <a href="\" target="_blank">designmodo.com/flat</a>
            </div>
          </div>
        </div>
      </div>
    </footer>
    
    <!-- Load JS here for greater good =============================-->
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="js/jquery.ui.touch-punch.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-select.js"></script>
    <script src="js/bootstrap-switch.js"></script>
    <script src="js/flatui-checkbox.js"></script>
    <script src="js/flatui-radio.js"></script>
    <script src="js/jquery.tagsinput.js"></script>
    <script src="js/jquery.placeholder.js"></script>
    <script src="js/jquery.stacktable.js"></script>
    <!---<script src="http://vjs.zencdn.net/4.1/video.js"></script>-->
    <script src="js/application.js"></script>
		<script>
	$(".box-block").die().live('click mouseleave',function(e){
		//$(this).prevAll().hide();
		if(e.type == 'click'){
			if($(this).parent().width()>720){
				if($(this).prevAll().length < 2){
					$(this).css('border-radius','4px 0 0 4px').find(".more").show().animate({width:'100%'},200);
				}else{
					$(this).css('border-radius','0 4px 4px 0').find(".more").removeAttr('style').css({right:'100%',borderRadius:'4px 0 0  4px'}).show().animate({width:'100%'},200);
				}
			}else{
				
			}
		}else{	
			$(this).css('border-radius','4px').find(".more").hide().css('width','0');
			//$(this).prevAll().show();
		}
	});

	</script>
  </body>
</html>
